<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/easycommon.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>流转详细信息</title>
    <meta charset="utf-8">
    <style>
    	html, body{ margin:0; height:100%; }
    	table{font-size:18px}
    	.input{width:250px;margin:4px;height:35px;border: 1px solid #ccc;font-size:18px;border-radius:4px}
    	label{margin:4px}		
    	.btn{width:100px;height:35px;border-radius:4px;background:#6CAEF5;font-size:18px;margin:15px}	
    </style>
      	<script type="text/javascript" src="${basepath}/assets/ztree/jquery.ztree.all-3.5.js"></script>
  		<link rel="stylesheet" type="text/css" href="${basepath}/assets/ztree/zTreeStyle.css" />
    <script>
	var transgrid;  	
	var datagrid; //定义全局变量datagrid      
    var data; //定义全局变量datagrid
    $(function(){       
        transgrid = $('#trans').treegrid({
    		rownumbers:true,
    		singleSelect:true,
    		pagination:true,
    		fit: true, //datagrid自适应宽度
            fitColumn: true, //列自适应宽度
            striped: true, //行背景交换
            nowap: false, //列内容多时自动折至第二行
            border: false,
            idField: 'id', //主键
            width:350,
            height:'98%',
            method:'get',
            treeField: 'title',
    		url:"${path}/tasktrans/trans",    		
            columns: [[
                     //  {field: '_operate', title: '操作', width: 250, formatter: formatOper},
                       {field: 'title', title: '任务标题', width: 150},
                       {field: 'content', title: '任务内容', width: 250},
                       {field: 'goal', title: '目标', width: 150},
                       {field: 'taskTypeName', title: '任务类型', width: 80},
                       {field: 'taskLevelName', title: '任务等级', width: 80},
                       {field: 'tablebaseName', title: '基础模板', width: 80},
                       {field: 'createdtimeYMD', title: '创建时间', width: 100},
                       {field: 'beginTime', title: '开始时间', width: 100},
                       {field: 'endTime', title: '结束时间', width: 100},
                       {field: 'taskStatusName', title: '任务状态', width: 80},
                       {field: 'note', title: '备注', width: 250}
                     ]] ,
            onClickRow:function (rowData) { 
            	
            	console.log(rowData);
            	datagrid.datagrid('load',{
             		taskID: rowData.id
            	}); 
            } 
    	})

        datagrid = $('#baseType').datagrid({
    		rownumbers:true,
    		singleSelect:true,
    		pagination:true,
    		fit: true, //datagrid自适应宽度
            fitColumn: true, //列自适应宽度
            striped: true, //行背景交换
            nowap: false, //列内容多时自动折至第二行
            border: false,
            idField: 'id', //主键
            width:350,
            height:'98%',
            method:'get',
    		url:"${path}/tasktrans/transDetail",
    		columns:[[
    		          {field: 'userName', title: '接收人', width: 200},
    		          {field: 'deptName', title: '部门', width: 80},
    		          {field: 'time', title: '下发时间', width: 100},
    		          {field: 'statusName', title: '流转状态', width: 80},
    		          {field: 'note', title: '备注', width: 250}
    		      
    			]],           
            onClickRow:function (rowIndex, rowData) {           	
            	loadData(rowData.id);
            }
    	})
    	
		
    	var loadData=function(taskUserID){
        	$.ajax( {  
                url:"${path}/tasktrans/transDataDetail",
                data: {"taskUserID":taskUserID},  
                type:'get',  
                cache:false,  
                dataType:'json',  
                success:function(data) { 
                	//console.log(data);
                    if(data.status =="1" ){  
                    	buildDataGrid(data.metadata,data.data)
            			 
                    }
     			 
            	}
        	})
        }
    	var buildDataGrid=function(metadata,data){
    	//解析data         
        var metadata = eval(metadata);   
    	
    	//console.log(metadata);
    	//console.log(data);
    	
        //旧数据
        var data=eval(data);     

        var field=new Array();
        var dataSet=new Array();
    	field.push({'field':'行名','title':'行名','sortable':true,'width':150});
        //生成field
        $(metadata).each(function(index,element) {
        	//debugger;
        	if(element.itemType==1){
            	var fieldItem={'field':element.name,'title':element.name,'width':150};           	
            	field.push(fieldItem);
        	}else{
        		var dataItem={'行名':element.name};       		
        		if(data!=null){
        			$(data).each(function(index2,element2) {
        				if(element2.行名==element.name){
        					dataItem=element2;
        				}
        			})
        		}
        		
        		dataSet.push(dataItem);
        	}

        })
        
        data = $('#data').datagrid({
    		rownumbers:true,
    		singleSelect:true,
    		fit: true, //datagrid自适应宽度
            fitColumn: true, //列自适应宽度
            striped: true, //行背景交换
            nowap: false, //列内容多时自动折至第二行
            border: false,
            idField: 'id', //主键
            height:'98%',
			data:dataSet,
    		columns: [field]
    	}) 
    	
    	}
    	   	
    }) 	
    	
    
    </script>
</head>
<body>

	<div id="gridlayout" class="easyui-layout" style="width:100%;height:100%;">
		<div data-options="region:'west',split:true"  style="width:40%;">
            <table id="trans" title="任务" class="easyui-datagrid" style="width:850px"
					singleSelect="true" iconCls="icon-save">
			</table>
          </div>
		<div data-options="region:'center'"  style="width:30%;">
		 	<table id="baseType" title="任务流转" class="easyui-datagrid" style="width:850px"
					singleSelect="true" iconCls="icon-save">
			</table>
		</div>
		<div data-options="region:'east',split:true" style="width:30%;">
		 	<table id="data" title="任务指标" class="easyui-datagrid" style="width:850px"
					singleSelect="true" iconCls="icon-save">
			</table> 
		</div>
	</div>

</body>
</html>
